<template>
    <n-scrollbar x-scrollable style="max-height: 100vh">
        <CommonPage>
            <div>
                <n-form ref="form"
                        :model="searchCondition"
                        label-placement="left"
                        label-align="right"
                        label-width="80px"
                        :show-require-mark="false">
                    <div>
                        <div class="grid md:flex md:flex-wrap md:gap-x-1">
                            <n-form-item>
                                <label style="width: 50px;">店铺：</label>
                                <n-input style="width: 140px;" v-model:value="searchCondition.name" placeholder="输入店铺名" clearable/>
                            </n-form-item>
                            <n-form-item style="margin-left: 10px">
                                <label style="width: 60px;">联系人：</label>
                                <n-input style="width: 150px;" v-model:value="searchCondition.contactName" placeholder="输入联系人" clearable/>
                            </n-form-item>
                            <n-form-item style="margin-left: 10px">
                                <label style="width: 50px;">平台:</label>
                                <n-select v-model:value="searchCondition.platform" :options="platforms" clearable filterable/>
                            </n-form-item>
                            <n-form-item  style="margin-left: 10px">
                                <n-button type="primary" @click="searchByCondition">筛选</n-button>
                            </n-form-item>
                            <n-form-item  style="margin-left: 10px">
                              <n-button type="primary" @click="showForm = true">添加店铺</n-button>
                            </n-form-item>
                          <n-form-item style="margin-left: 10px">
                            <n-button type="error" @click="deleteSelectProduct">批量删除</n-button>
                          </n-form-item>

                        </div>
                    </div>
                </n-form>
            </div>
          <AddShopForm
              :option="option"
              @update-page="searchByCondition"
              :show="showForm"
              :onClose="handleClose"/>
          <EditShopForm
              :option="option"
              @update-page="searchByCondition"
              :show="showForm1"
              :onClose="handleClose"
              :attribute="currentAttribute"/>
          <n-data-table
              remote
              :single-line="false"
              ref="table"
              :columns="columns"
              :data="categoryList"
              :loading="loading"
              :pagination="paginationReactive"
              :row-key="rowKey"
              :scroll-x="900"
              @update:checked-row-keys="handleCheck"
          />
        </CommonPage>
    </n-scrollbar>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import api from '@/api/admin';

import {useUserStore} from '@/store';
import {useRouter} from 'vue-router';

import {NButton} from 'naive-ui'
import ShopActions from "@/views/admin/system/components/shop-actions.vue";
import AddShopForm from "./components/shop-add.vue"
import EditShopForm from "./components/shop-edit.vue"

const showForm = ref(false);
const showForm1 = ref(false);
const currentAttribute = ref(null); // 当前编辑的属性
const handleClose = () => {
  showForm.value = false;
  showForm1.value = false;
};
const userStore = useUserStore()
const router = useRouter()
const loading = ref(true)
const categoryList = ref([])
const range = ref(null)
const value = ref("全部")
const checkedRowKeysRef = ref([]);
const option = ref([
])
const searchCondition = ref({
    name: "",
    contactName: "",
    platform: "全部"
});
const platforms = ref([])
platforms.value.push({
      label: '全部',
      value: "全部",
    },
    {
      label: '淘宝',
      value: "淘宝",
    },
    {
      label: '京东',
      value: "京东",
    },
    {
      label: '拼多多',
      value: "拼多多",
    },
    {
      label: '天猫',
      value: "天猫",
    },
    {
      label: '亚马逊',
      value: "亚马逊",
    },
    {
      label: 'shopify',
      value: "shopify",
    },
    {
      label: 'ebay',
      value: "ebay",
    },
    {
      label: '沃尔玛',
      value: "沃尔玛",
    },
)
const admins = ref([])
admins.value.push({
    label: '全部',
    value: -1,
})
const columns = [
    {
        type: 'selection',
        fixed: 'left',
    },
    {
        key: 'colId',
        title: '序号',
        width: 60,
    },
    {
        key: 'name',
        title: '店铺名称',
        width: 100,
    },
    {
        key: 'address',
        title: '店铺地址',
        width: 100,
    },

    {
        key: 'platform',
        title: '店铺平台',
        width: 100,
    },
    {
        key: 'contactName',
        title: '联系人',
        width: 100,
    },
    {
        key: 'contactPhone',
        title: '联系电话',
        width: 100,
    },
    {
        key: 'authorizationTime',
        title: '授权时间',
        width: 100,
    },
    {
        key: 'operation',
        title: '操作',
        width: 100,
        render(row) {
            return h(
                ShopActions,
                {
                    onClickDelete: () => onDeleteShop(row),
                    onClickEdit: () => onEditShop(row),
                }
            );
        }
    },
]
let total = 0
const paginationReactive = reactive({
    page: 1,
    pageSize: 20,
    showSizePicker: true,
    pageSizes: [20, 50, 100],
    itemCount:0,
    prefix: () => {
        return '查询出 ' + total + '条记录';
    },
    onChange: (page) => {
        paginationReactive.page = page;
        queryByPage()
    },
    onUpdatePageSize: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        queryByPage()
    }
});
const handleCheck = (rowKeys) => {
    checkedRowKeysRef.value = rowKeys;
}
const deleteSelectProduct = () => {
    if(checkedRowKeysRef.value.length <= 0) {
        $message.error("当前并未选择店铺！")
        return
    }
    $dialog.confirm({
        title: '警告',
        content: '您确定删除当前所选店铺？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const ids = checkedRowKeysRef.value.join(",")
            loading.value = true
            try {
                const res = await api.deleteShops({params:{ids}})
                if(res.code === 200) {
                    $message.success("删除所选店铺成功！")
                    await searchByCondition()
                }
                else {
                    $message.error(res.message)
                }
            } catch (err) {
                $message.error("删除所选店铺失败！")
            }finally{
                loading.value = false
            }
        },
    })
}
const searchByCondition = async () => {
    loading.value = true
    try {
        paginationReactive.page = 1;
        const res = await api.findPageShop({
            params: {
                ...searchCondition.value,
                pageNum: paginationReactive.page,
                pageSize: paginationReactive.pageSize,
            }
        })
        if(res.code === 200) {
            total = res.data.total
            paginationReactive.itemCount = total
            const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
            categoryList.value = res.data.records.map((item,i)=>{
                return {...item,
                    colId: baseCount + i + 1,
                }
            })
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("查询店铺失败！")
    }finally{
        loading.value = false
    }
}
const exportListInfo = async () => {
    const res = await api.exportShopList({
        adminId: searchCondition.value.adminId
    })
    const contentDisposition = res.headers["content-disposition"]
    // console.log(res)
    let original_fileName = ""
    if(contentDisposition) {
        const uri = res.headers["content-disposition"].split("=")[1]
        original_fileName = window.decodeURI(uri)
    }
    const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
    if(window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, original_fileName);
    } else{
        const fileName = original_fileName;
        const elink = document.createElement('a')
        document.body.appendChild(elink)
        elink.download= fileName;
        elink.style.display ="none"
        elink.href  = window.URL.createObjectURL(blob)
        elink.click()
        window.URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
    }
}
const onDeleteShop = async (productCategory) => {
    $dialog.confirm({
        title: '警告',
        content: '您确定删除当前店铺？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const {id} = productCategory
            loading.value = true
            try {
                const res = await api.deleteShop({id})
                if(res.code === 200) {
                    $message.success("删除店铺成功！")
                    await searchByCondition()
                }
                else {
                    $message.error(res.message)
                }
            } catch (err) {
                $message.error("删除店铺失败！")
            }finally{
                loading.value = false
            }
        }
    })
}
const onEditShop = async (shop) => {
  currentAttribute.value = shop; // 设置当前编辑的属性
  showForm1.value = true; // 显示编辑窗口
}

const queryByPage = async () => {
    loading.value = true
    try {
        const res = await api.findPageShop(
            {
                params:{
                    pageNum:paginationReactive.page,
                    pageSize:paginationReactive.pageSize,
                }
            })
        if(res.code === 200) {
            total = res.data.total
            paginationReactive.itemCount = total
            const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
            categoryList.value = res.data.records.map((item,i)=>{
                return {...item,
                    colId: baseCount + i + 1,
                }
            })
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取店铺失败！")
    }finally{
        loading.value = false
    }
}
const rowKey = (rowData) => {
    return rowData.id
}
onMounted(()=>{
    queryByPage()
})
</script>
<style scoped>
:deep(.n-data-table-th__title),
:deep(.n-data-table-td) {
    text-align: center;

}
:deep(.n-select) {
    width: 120px !important;
}

:deep(.two-line-description) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 控制显示的行数 */
    overflow: hidden;
}
</style>
